<template>
  <!-- 所有的 group-map 选择器 -->
    <n-modal
      v-model:show="showSelectorModal"
      preset="dialog"
      :bordered="false"
      :segmented="{content: 'soft', footer: 'soft'}"
      :show-icon="false"
      :maskClosable="false"
      :style="{ width: '50em', height: '35em' }"
      >

      
      <div v-if="!showGroupMap">
        <div style="height:2em"></div>
        <n-grid :x-gap="12" :y-gap="8" responsive="screen" item-responsive>
          <n-gi span="12 m:8 l:6 xl:4" v-for="item,index in groups" :key="'choose_group_' + index"
              @click="toggleToGroupMap(item)" class="groupName-wrapper">
            <span class="groupName"> {{ item }} </span> 
          </n-gi>
        </n-grid>
      </div>

      <div v-else class="groupMaps">
        <n-page-header subtitle="" @back="toggleToGroup"></n-page-header>
        <n-scrollbar style="height:40em" :trigger="'hover'" >
          <div class="groupMap" v-for="item,index in groupMaps" :key="'choose_groupMap_'+index">
            <!-- 左侧来源 -->
            <div class="source">
              <span v-if="item.sourceClientNode">
                {{ item.sourceClientNode.name }} {{ item.sourceClientNode.host }}:{{ item.sourceClientNode.port }}
              </span>
              <template v-else>*</template>
              <br/>
              <n-ellipsis :line-clamp="1" :title="item.source">{{ item.source }}</n-ellipsis>
            </div>

            <!-- 中间图标 -->
            <div class="arrow-dirc" title="Synchronize Now" > 
              <n-icon ><KeyboardDoubleArrowRightOutlined/></n-icon>
            </div>
    
            <!-- 右侧目标 -->
            <div class="target">
              <template v-if="item.targetClientNode">
                <span class="name"> {{ item.targetClientNode.name }} </span> &nbsp;
                <span class="addr"> {{ item.targetClientNode.host }}:{{ item.targetClientNode.port }} </span>
              </template>
              <template v-else> * </template>
    
              <div>{{ item.target }}</div>
            </div>

            <!-- 最后的添加操作 -->
            <div class="center-item arrow-dirc" > 
              <n-button size="small" tertiary type="warning" @click="chooseGroupMap(item)"
                  :disabled="isSelected(item.id)"> 
                <n-icon><DownloadDoneRound/></n-icon> 
              </n-button>
            </div>

        </div>

        </n-scrollbar>
  
        <!--
        <div style="display: flex; justify-content: flex-end">
          <n-button round type="info" size="small" style="margin-right:4px" @click="choosedFile()" >
            选择
          </n-button>
          <n-button round type="warning" size="small" @click="close()" >
            关闭
          </n-button>
        </div>
        -->
      </div>

    </n-modal>
</template>

<script setup>
import { ref, nextTick, inject } from 'vue'
import { NPageHeader } from 'naive-ui'
import { FolderOutlined, KeyboardDoubleArrowRightOutlined, DownloadDoneRound, DeleteRound } from '@vicons/material'
import serverApi from '/src/api/fsync/server.js'

const showGroupMap = ref(false) // 显示 选择 group 还是选择 groupMap

const groups = ref(null)  // 所有 group name 
const groupName = ref(null) // 选中的 group name
const groupMaps = ref(null)  // 选中 group 的所有 GroupMap
const showSelectorModal = ref(false)
const emit = defineEmits([ "selected" ])

// 以选择的 groupMap
const selectedIds = ref([])

const Message = inject("Message")
const Dialog = inject("Dialog")

const groupLoading = ref(false)
const groupMapLoading = ref(false)

const show = (ids) => {
  showSelectorModal.value = true
  selectedIds.value = ids
  showGroupMap.value = false
  resetData()
  listGroups()
}
const close = () => {
  showSelectorModal.value = false
  resetData()
}
const resetData = () => {
  groups.value = null
  groupName.value = null
  groupMaps.value = null
}

// 获取所有 groupname
const listGroups =  () => {
  groupLoading.value = true
  serverApi.groupNames().then(res => {
    groupLoading.value = false
    groups.value = res.data
  }, err => {
    groupLoading.value = false
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}
// 列出 groupname 对应的 groupMap
const listGroupMaps = () => {
  groupMapLoading.value = true
  serverApi.groupList({ name: groupName.value}).then(res => {
    groupMapLoading.value = false
    groupMaps.value = res.data
  }, err => {
    groupMapLoading.value = false
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}
// 切换到选择 groupMap
const toggleToGroupMap = (name) => {
  groupName.value = name
  showGroupMap.value = true
  listGroupMaps()
} 
// 切换到选择 group
const toggleToGroup = () => {
  groupName.value = null
  groupMaps.value = null
  showGroupMap.value = false
  // groups.value = null
}
// 
const isSelected = (groupMapId) => {
  return selectedIds.value && selectedIds.value.indexOf(groupMapId) >= 0
}
// 选择一个 groupMap ，但不会关闭弹窗
const chooseGroupMap = (groupMap) => {
  emit("selected", groupMap)
}
// 设置禁止的 id
const setSelectedIds = (ids) => {
  selectedIds.value.ids = ids
}
// 添加禁止的 id
const addSelectedId = (id) => {
  if(!id && id != 0) {
    return
  }

  if (selectedIds.value) {
    selectedIds.value.push(id)
  } else {
    selectedIds.value = [id]
  }
}

defineExpose({
  show, close, setSelectedIds, addSelectedId,
})

</script>

<style scoped lang="scss">
.arrow-dirc{
  font-size: 1.5em;
  color:green;
  display: flex;
  align-items: center;
}
.groupName-wrapper{
  border: 1px dashed #ced2d7;
  text-align: center;
  cursor: pointer;
}
.groupName{
  color: #1251a1;
  &:hover{
    text-shadow: 0px 0px 3px rgba(18, 203, 216, 0.8);
  }
}

.groupMap{
  text-align: center;
  display: flex;
  .source, .target{
    flex: 1;
  }
  &:nth-child(1) {
    border-top: 1px dashed #ced2d7;
  }
  &:nth-child(n+1) {
    border-bottom: 1px dashed #ced2d7;
  }
}
</style>
